<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历展示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            width: 80%;
            margin: 0 auto;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        img {
            max-width: 100%;
            height: auto;
        }
        iframe {
            width: 100%;
            height: 300px;
            border: none;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">个人简历</h1>

    <table>
        <tr>
            <th colspan="2">个人基本信息</th>
        </tr>
        <tr>
            <td>姓名</td>
            <td id="name"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td id="gender"></td>
        </tr>
        <tr>
            <td>出生年月</td>
            <td id="dob"></td>
        </tr>
        <tr>
            <td>籍贯</td>
            <td id="hometown"></td>
        </tr>
        <tr>
            <td>兴趣爱好</td>
            <td id="hobbies"></td>
        </tr>
        <tr>
            <td>住址</td>
            <td id="address"></td>
        </tr>
        <tr>
            <td>联系电话</td>
            <td id="phone"></td>
        </tr>
        <tr>
            <th colspan="2">教育背景</th>
        </tr>
        <tr>
            <td>学校</td>
            <td id="school"></td>
        </tr>
        <tr>
            <td>专业</td>
            <td id="major"></td>
        </tr>
        <tr>
            <td>专业排名</td>
            <td id="rank"></td>
        </tr>
        <tr>
            <th colspan="2">奖励情况</th>
        </tr>
        <tr>
            <td colspan="2" id="awards"></td>
        </tr>
        <tr>
            <th colspan="2">专业技能</th>
        </tr>
        <tr>
            <td colspan="2" id="skills"></td>
        </tr>
        <tr>
            <th colspan="2">自我评价</th>
        </tr>
        <tr>
            <td colspan="2" id="selfEvaluation"></td>
        </tr>
    </table>

    <h2 style="text-align: center;">多媒体内容</h2>
    <div style="text-align: center;">
        <img src="image.png" alt="示例图片">
        <video controls style="margin-top: 20px;">
            <source src="https://www.w3schools.com/html/mov_bbb.mp4  " type="video/mp4">
            您的浏览器不支持视频播放。
        </video>
        <audio controls style="margin-top: 20px;">
            <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3  " type="audio/mp3">
            您的浏览器不支持音频播放。
        </audio>
        <iframe src="https://www.example.com  " title="示例网站"></iframe>
    </div>

    <script>
        // 从 localStorage 获取表单数据
        const resumeData = JSON.parse(localStorage.getItem('resumeData'));

        if (resumeData) {
            // 动态填充表格内容
            document.getElementById('name').textContent = resumeData.name;
            document.getElementById('gender').textContent = resumeData.gender;
            document.getElementById('dob').textContent = resumeData.dob;
            document.getElementById('hometown').textContent = resumeData.hometown;
            document.getElementById('hobbies').textContent = resumeData.hobbies;
            document.getElementById('address').textContent = resumeData.address;
            document.getElementById('phone').textContent = resumeData.phone;
            document.getElementById('school').textContent = resumeData.school;
            document.getElementById('major').textContent = resumeData.major;
            document.getElementById('rank').textContent = resumeData.rank;
            document.getElementById('awards').textContent = resumeData.awards;
            document.getElementById('skills').textContent = resumeData.skills;
            document.getElementById('selfEvaluation').textContent = resumeData.selfEvaluation;
        } else {
            alert('未找到表单数据，请先填写表单！');
            window.location.href = 'index.html'; // 返回注册页面
        }
    </script>
</body>
</html>